<template>
    <div>
        <!-- 顶部导航 -->
        <van-nav-bar title="新增收获地址" left-text="返回" @click-left="onClickLeft"  class="leader"  left-arrow>
            <template #right >
               <van-icon name="ellipsis" size='26px' color='#333' class="pullTab" @click.stop="ShowHidden = !ShowHidden" />
               <Pulltab 
                    v-if="ShowHidden" 
                    @click.stop=""
               />
            </template>
        </van-nav-bar>
        <div class="main">
            <van-address-edit
                :area-list="areaList"
                show-postal
                show-delete
                show-set-default
                show-search-result
                :search-result="searchResult"
                :area-columns-placeholder="['请选择', '请选择', '请选择']"
                save-button-text="确认提交"
                @save="onSave"
                @delete="onDelete"
                :address-info="addressInfo"
            />
        </div>
    </div>
</template>

<script>

    import Vue from 'vue';
    import { AddressEdit } from 'vant';
    import { areaList } from '@vant/area-data';
    import Pulltab from '../components/Pulltab.vue'
    Vue.use(AddressEdit,areaList);
    
export default {
    components: {
        Pulltab,
    },
    data() {
        return {
            ShowHidden: false,
            areaList,
            searchResult: [],
            addressInfo:{
                id:'0',
                name:'小林',	
                tel:'18184489540',
                province:'',	
                city:'',	
                county:'',	
                addressDetail:'',	
                areaCode:'',	
                postalCode:'',
                isDefault:'',
            },
            idx:0,
        }
    },
    created () {
       this.idx= this.$route.query.index
       this.addressInfo = this.$route.query.item
    
    },
    mounted () {
        document.addEventListener('click', this.HiddenClick)
    },
    methods: {
        jump() {
            this.$router.push("/addresslist");
        },
        onSave(content) {
            let idx = this.idx
            content.address = content.province + content.city + content.county + content.addressDetail
            this.$store.commit('address/addressAddMut',{content,idx})
            this.$router.push({
                path:'/addresslist'
            })
            content.id = Math.random()
        },
        onDelete(content) {
            let idx = this.idx
            let i = -2
            this.$router.push('/addresslist')
            this.$store.commit('address/addressAddMut',{content,idx,i})
        },
        HiddenClick () {
            this.ShowHidden = false
        },
        onClickLeft(){
            this.$router.go(-1)
        }
    },
};
</script>

<style src="../assets/font/iconfont.css" scoped></style>
<style  scoped>
.main{
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    margin: auto;
    background: #f5f5f5;
}
::v-deep .van-nav-bar__left i{
    color:#444;
    font-size: 20px;
}
::v-deep .van-nav-bar__left span,::v-deep .van-nav-bar__title{
    color: #444;
    font-size: 16px;
}
</style>